<!--
 * Copyright © 2023
 * @Author: zhangxiang
 * @Date: 2023-01-31 16:48:10
 * @LastEditors: zhangxiang
 * @LastEditTime: 2023-09-25 15:07:18
 * @Description:
 *
-->

<template>
  <div ref="CloudSelectorCtn" class="cloud-selector">
    <div
      v-for="(item, index) in cloudProviderList"
      :key="index"
      :class="['cloud-item']"
    >
      <div
        :class="['img-wrapper', selectIndex === index ? 'select' : '']"
        @click="itemClick(index)"
      >
        <img class="img" :src="getImgSrc(item.value)" alt="" />
      </div>
      <!-- <div class="text">{{ item.label }}</div> -->
    </div>
  </div>
</template>

<script>
import {
  CLUSTER_PROVIDER,
  CLUSTER_PLATFORM,
  CLUSTER_ALL
} from '@/utils/constant'
export default {
  name: 'CloudSelector', // 组件名称
  props: {
    // 云商展示类别 all public private
    type: {
      type: String,
      default: 'all'
    },
    cloudSelect: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      selectIndex: -1
    }
  },
  computed: {
    /**
     * @description: 云商列表
     * @return {*}
     */
    cloudProviderList() {
      if (this.type === 'public') {
        return CLUSTER_PROVIDER
      } else if (this.type === 'private') {
        return CLUSTER_PLATFORM
      }
      return CLUSTER_ALL
    }
  },
  mounted() {
    this.selectIndex = this.cloudProviderList.findIndex((item) => {
      return this.cloudSelect === item.label
    })
  },
  methods: {
    /**
     * @description: 点击
     * @param {*} index
     * @return {*}
     */
    itemClick(index) {
      if (index === this.selectIndex) {
        return
      }
      this.selectIndex = index
      this.$emit('update:cloudSelect', this.cloudProviderList[index].value)
    },
    /**
     * @description: 获取图片src
     * @param {*} name
     * @return {*}
     */
    getImgSrc(name) {
      if (name === 'Openstack') {
        return require('@/assets/imgs/common/img_cloud_openstack_mini.png')
      } else if (name === '华为云') {
        return require('@/assets/imgs/common/img_cloud_huawei_mini.png')
      } else if (name === '阿里云') {
        return require('@/assets/imgs/common/img_cloud_aliyun_mini.png')
      } else if (name === '腾讯云') {
        return require('@/assets/imgs/common/img_cloud_tencent_mini.png')
      } else if (name === '浪潮InCloud') {
        return require('@/assets/imgs/common/img_cloud_inspur_mini.png')
      }
      return require('@/assets/imgs/common/img_cloud_aliyun_mini.png')
    }
  }
}
</script>

<style lang="less" scoped>
@import "@/assets/css/common.less";
.cloud-selector {
  padding: 0 0 30px 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;

  .cloud-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 10px;
    margin-right: 26px;

    &.fourth {
      margin-right: 0;
    }

    .img-wrapper {
      // width: 116px;
      // height: 40px;
      box-sizing: border-box;
      padding: 5px 14px;
      box-sizing: border-box;
      box-shadow: 2px 2px 4px -4px rgba(201, 197, 218, 0.47);
      border-radius: 2px;
      border: 1px solid #d6d6d6;
      cursor: pointer;
      line-height: 0;

      &.select {
        box-shadow: 0px 0px 4px 0px rgba(0, 145, 255, 0.47);
        border: 2px solid #0091ff;
      }

      .img {
        // width: 100%;
        height: 36px;
      }
    }

    .text {
      margin-top: 10px;
      .textStyle(14px, 500, #262626);
    }
  }
}
</style>
